<template>
  <div>
    <el-drawer v-model="drawer" :with-header="true" size="500">
      <template #header>
        <span v-if="nowStage !== 4">阶段信息</span>
        <div v-if="nowStage === 4" class="winningTitle">
          <div class="title-text" :class="{ active: winningType }" @click="winningType = true"
            >中标</div
          >
          |
          <div class="title-text" :class="{ active: !winningType }" @click="winningType = false"
            >流标</div
          >
        </div>
      </template>
      <div v-if="nowStage === 4 && !winningType">
        <div style="display: flex; justify-content: end; margin-bottom: 10px">
          <el-button type="primary" icon="Plus" @click="openLose({})">添加流标</el-button>
        </div>
        <el-table :data="lostList" stripestyle="width: 100%" v-loading="loadTab">
          <el-table-column type="index" width="50px" />
          <el-table-column prop="loseTime" label="流标时间" width="120px">
            <template #default="scope">
              {{ scope.row.loseTime.substring(0, 10) }}
            </template>
          </el-table-column>
          <el-table-column prop="loseRemark" label="流标备注" />
          <el-table-column fixed="right" label="操作" width="120">
            <template #default="scope">
              <el-button link type="primary" size="large" @click="openLose(scope.row)">
                编辑
              </el-button>
              <el-button link type="primary" size="large" @click="delLose(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-form v-else :model="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item v-if="nowStage === 1" label="启动时间：" prop="startTime">
          <el-date-picker
            v-model="ruleForm.startTime"
            type="date"
            placeholder="请选择启动时间"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item v-if="nowStage === 2" label="代理时间：" prop="biddingTime">
          <el-date-picker
            v-model="ruleForm.biddingTime"
            type="date"
            placeholder="请选择代理时间"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item v-if="nowStage === 2" label="代理公司名称：" prop="agentName">
          <el-input
            v-model="ruleForm.agentName"
            placeholder="请输入代理公司名称"
            style="width: 220px"
            maxlength="64"
          />
        </el-form-item>
        <el-form-item v-if="nowStage === 3" label="挂网时间：" prop="onlineTime">
          <el-date-picker
            v-model="ruleForm.onlineTime"
            type="date"
            placeholder="请选择挂网时间"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item v-if="nowStage === 4 && winningType" label="中标时间：" prop="winningTime">
          <el-date-picker
            v-model="ruleForm.winningTime"
            type="date"
            placeholder="请选择中标时间"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item v-if="nowStage === 4 && winningType" label="中标金额：" prop="winningAmount">
          <el-input-number
            v-model="ruleForm.winningAmount"
            :min="0"
            :precision="2"
            :max="500000000"
          />
          &nbsp;&nbsp;元
        </el-form-item>
        <el-form-item v-if="nowStage === 4 && winningType" label="中标备注：" prop="winningRemark">
          <el-input
            v-model="ruleForm.winningRemark"
            placeholder="请输入中标备注"
            style="width: 220px"
            maxlength="64"
          />
        </el-form-item>
        <el-form-item v-if="nowStage === 5" label="签约时间：" prop="signTime">
          <el-date-picker
            v-model="ruleForm.signTime"
            type="date"
            placeholder="请选择签约时间"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item v-if="nowStage === 5" label="签约金额：" prop="signAmount">
          <el-input-number
            v-model="ruleForm.signAmount"
            :min="0"
            :precision="2"
            :max="500000000"
          />&nbsp;&nbsp;元
        </el-form-item>
        <el-form-item v-if="nowStage === 5" label="签约备注：" prop="signRemark">
          <el-input
            v-model="ruleForm.signRemark"
            placeholder="请输入签约备注"
            style="width: 220px"
            maxlength="64"
          />
        </el-form-item>
        <el-form-item v-if="nowStage === 6" label="验收时间：" prop="acceptTime">
          <el-date-picker
            v-model="ruleForm.acceptTime"
            type="date"
            placeholder="请选择验收时间"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item v-if="nowStage === 6" label="验收备注：" prop="acceptRemark">
          <el-input
            v-model="ruleForm.acceptRemark"
            placeholder="请输入验收备注"
            style="width: 220px"
            maxlength="64"
          />
        </el-form-item>
        <el-form-item v-if="nowStage === 7" label="完成时间：" prop="successTime">
          <el-date-picker
            v-model="ruleForm.successTime"
            type="date"
            placeholder="请选择完成时间"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="文件：" v-if="nowStage >= 3 && nowStage <= 6 && winningType">
          <el-upload
            ref="upload"
            class="upload-demo"
            :limit="1"
            action="#"
            :auto-upload="false"
            v-model:file-list="fileList"
            style="width: 280px"
          >
            <template #trigger>
              <el-button type="primary" icon="Upload" :disabled="fileList.length === 1"
                >上传文件</el-button
              >
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="drawer = false">取消</el-button>
          <el-button type="primary" @click="submit()">确定</el-button>
        </span>
      </template>
      <el-drawer :title="loseTitle" v-model="infoDrawer" :with-header="true">
        <el-form :model="ruleForm" label-width="120px" class="demo-ruleForm">
          <el-form-item label="流标时间：" prop="loseTime">
            <el-date-picker
              v-model="ruleForm.loseTime"
              type="date"
              placeholder="请选择流标时间"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="流标备注：" prop="loseRemark">
            <el-input
              v-model="ruleForm.loseRemark"
              placeholder="请输入流标备注"
              style="width: 220px"
              maxlength="64"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="addOrUpdata()">确定</el-button>
            <el-button @click="infoDrawer = false">取消</el-button>
          </span>
        </template>
      </el-drawer>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import {
    putProjectUpdateStatus,
    postProjectUploadAccept,
    postProjectUploadOnline,
    postProjectUploadSign,
    postProjectUploadWinning,
    postProjectGetStatus,
  } from '@/api/controller/project-controller/index'
  import {
    postLoseDetail,
    getLoseDetailByProjectNumber,
    deleteLoseDetailById,
    postLoseDetailUpdate,
  } from '@/api/controller/lose-detail-controller/index'
  const drawer = ref(false)
  const nowStage = ref()
  const ruleForm = ref()
  const winningType = ref(true)
  const lostList = ref<any>([])
  const loadTab = ref(false)
  const infoDrawer = ref(false)
  const proNum = ref()
  const show = async (val, stage, projectNumber) => {
    let res = await postProjectGetStatus({ id: val, status: stage })
    nowStage.value = stage
    switch (stage) {
      case 1:
        ruleForm.value = {
          id: val,
          startTime: res.data.startTime,
        }
        break
      case 2:
        ruleForm.value = {
          id: val,
          biddingTime: res.data.biddingTime,
          agentName: res.data.agentName,
        }
        break
      case 3:
        ruleForm.value = {
          id: val,
          onlineTime: res.data.onlineTime,
        }
        break
      case 4:
        ruleForm.value = {
          id: val,
          winningTime: res.data.winningTime,
          winningAmount: res.data.winningAmount || 0,
          winningRemark: res.data.winningRemark,
        }
        loadTab.value = false
        proNum.value = projectNumber
        getLoseDetailByProjectNumber({ projectNumber: projectNumber }).then((res) => {
          lostList.value = res.data
        })
        break
      case 5:
        ruleForm.value = {
          id: val,
          signTime: res.data.signTime,
          signAmount: res.data.signAmount || 0,
          signRemark: res.data.signRemark,
        }
        break
      case 6:
        ruleForm.value = {
          id: val,
          acceptTime: res.data.acceptTime,
          acceptRemark: res.data.acceptRemark,
        }
        break
      case 7:
        ruleForm.value = {
          id: val,
          successTime: res.data.successTime,
        }
        break
    }
    fileList.value = []
    winningType.value = true
    drawer.value = true
  }
  const submit = async () => {
    let file
    if (nowStage.value >= 3 && nowStage.value <= 6 && winningType.value) {
      if (fileList.value[0]) {
        file = new FormData()
        file.append('file', fileList.value[0].raw)
      } else {
        ElMessage.warning('请上传文件')
        return
      }
    }
    let result
    switch (nowStage.value) {
      case 1:
        if (ruleForm.value.startTime) {
          result = await putProjectUpdateStatus(ruleForm.value, { loading: true })
        } else {
          ElMessage.warning('表单填写错误')
        }
        break
      case 2:
        if (ruleForm.value.biddingTime) {
          result = await putProjectUpdateStatus(ruleForm.value, { loading: true })
        } else {
          ElMessage.warning('表单填写错误')
        }
        break
      case 3:
        if (ruleForm.value.onlineTime) {
          result = await postProjectUploadOnline(ruleForm.value, file, { loading: true })
        } else {
          ElMessage.warning('表单填写错误')
        }
        break
      case 4:
        if (ruleForm.value.winningTime || ruleForm.value.loseTime) {
          if (winningType.value) {
            result = await postProjectUploadWinning(ruleForm.value, file, { loading: true })
          } else {
            result = await postLoseDetail(ruleForm.value, { loading: true })
          }
        } else {
          ElMessage.warning('表单填写错误')
        }
        break
      case 5:
        if (ruleForm.value.signTime) {
          result = await postProjectUploadSign(ruleForm.value, file, { loading: true })
        } else {
          ElMessage.warning('表单填写错误')
        }
        break
      case 6:
        if (ruleForm.value.acceptTime) {
          result = await postProjectUploadAccept(ruleForm.value, file, { loading: true })
        } else {
          ElMessage.warning('表单填写错误')
        }
        break
      case 7:
        if (ruleForm.value.successTime) {
          result = await putProjectUpdateStatus(ruleForm.value, { loading: true })
        } else {
          ElMessage.warning('表单填写错误')
        }
        break
    }
    if (result.code === 200) {
      if (winningType.value) {
        emit('getData')
        drawer.value = false
        ElMessage.success('添加成功')
      } else {
        infoDrawer.value = false
        drawer.value = true
      }
    } else {
      ElMessage.warning('上传失败')
    }
  }
  const fileList = ref([])

  const loseTitle = ref('')
  const openLose = (row) => {
    if (row.id) {
      loseTitle.value = '编辑流标信息'
      ruleForm.value.loseRemark = row.loseRemark
      ruleForm.value.loseTime = row.loseTime
      ruleForm.value.id = row.id
    } else {
      loseTitle.value = '新增流标信息'
      ruleForm.value.loseRemark = ''
      ruleForm.value.loseTime = ''
    }
    infoDrawer.value = true
  }

  const addOrUpdata = async () => {
    if (loseTitle.value === '新增流标信息') {
      await submit()
    } else {
      let res = await postLoseDetailUpdate(ruleForm.value, { loading: true })
      if (res.code === 200) {
        ElMessage.success('修改成功')
      }
    }
    loadTab.value = true
    let res = await getLoseDetailByProjectNumber({ projectNumber: proNum.value })
    lostList.value = res.data
    loadTab.value = false
    infoDrawer.value = false
  }

  const delLose = async (row) => {
    ElMessageBox.confirm('是否删除该流标信息？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(async () => {
      let res = await deleteLoseDetailById({ id: row.id }, { loading: true })
      if (res.code === 200) {
        loadTab.value = true
        let res = await getLoseDetailByProjectNumber({ projectNumber: proNum.value })
        lostList.value = res.data
        loadTab.value = false
        ElMessage.success('删除成功')
      }
    })
  }

  const emit = defineEmits(['getData'])
  defineExpose({
    show,
  })
</script>

<style lang="scss" scoped>
  .winningTitle {
    display: flex;
    margin-bottom: 12px;
  }
  .title-text {
    font-size: 16px;
    color: #666;
    font-weight: 700;
    padding: 0px 16px;
    cursor: pointer;
    &.active {
      font-size: 18px;
      color: #1890ff;
    }
  }
</style>
